body {
  background-color: cornflowerblue;
}
.box {
  width: 150px;
  height: 300px;
  margin: 50px auto;
  position: relative;
  transform: rotate(45deg);
}
.box .box-0 {
  width: 200px;
  height: 200px;
  background-color: pink;
  border-radius: 0 200px;
  position: absolute;
  bottom: 0px;
  left: -80%;
  transform-origin: bottom right;
  transition: all 2s linear 0.2s;
}
.box .guzi {
  width: 10px;
  height: 200px;
  background-color: pink;
  position: absolute;
  top: 265px;
  left: 139px;
  transform: rotate(315deg);
  border-radius: 10px;
}
.box:hover .box-0:nth-child( 3) {
  transform: rotate(-75deg);
}
.box:hover .box-0:nth-child( 2) {
  transform: rotate(-50deg);
}
.box:hover .box-0:nth-child( 1) {
  transform: rotate(-25deg);
}
.box:hover .box-0:nth-child( 7) {
  transform: rotate(75deg);
}
.box:hover .box-0:nth-child( 6) {
  transform: rotate(50deg);
}
.box:hover .box-0:nth-child( 5) {
  transform: rotate(25deg);
}
.box:hover .box-0:nth-child( 4) {
  transform: rotate(0deg);
}
.box:hover .box-0 {
  background-image: linear-gradient(to bottom, orangered, red, purple, green);
  opacity: 0.5;
}
.box:hover .guzi {
  opacity: 0.5;
  background-image: linear-gradient(to bottom, green, purple, red, orangered);
}
